<template>
  <div class="element-select-wrapper">
    <div class="element-item">
      <h4 class="title">地图设置:</h4>
      <div class="input-box">行: <input v-model="row" /></div>
      <div class="input-box">列: <input v-model="col" /></div>
    </div>

    <h3 class="title">元素选择区</h3>
    <div
      class="element-item"
      v-for="{ key, text, selectList } in renderList"
      :key="key"
    >
      <h4 class="title">{{ text }}:</h4>
      <div class="element-box">
        <template v-for="{ name, icon, element } in selectList" :key="name">
          <EditElement
            :icon="icon"
            :name="name"
            :editElement="element"
            :activeName="activeName"
            @changeActiveName="changeActiveName(name)"
          ></EditElement>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MapTile } from '@/constants';
import {
  wallEditElement,
  floorEditElement,
  cargoEditElement,
  targetEditElement,
  playerEditElement,
  type NameType,
  type EditElementInterface,
} from '@/stores/elementEdit';
import EditElement from './EditElement.vue';
import { ref, watchEffect } from 'vue';
import { useMapEditStore } from '@/stores/mapEdit';

const renderList: Array<{
  key: string;
  text: string;
  selectList: Array<{
    name: NameType;
    element: EditElementInterface;
    icon: MapTile;
  }>;
}> = [
  {
    key: 'map',
    text: '地图',
    selectList: [
      { name: 'wall', icon: MapTile.WALL, element: wallEditElement },
      { name: 'floor', icon: MapTile.FLOOR, element: floorEditElement },
    ],
  },
  {
    key: 'cargo',
    text: '箱子',
    selectList: [
      {
        name: 'cargo',
        icon: MapTile.CARGO,
        element: cargoEditElement,
      },
    ],
  },
  {
    key: 'target',
    text: '目标点',
    selectList: [
      {
        name: 'target',
        icon: MapTile.TARGET,
        element: targetEditElement,
      },
    ],
  },
  {
    key: 'player',
    text: '角色',
    selectList: [
      {
        name: 'player',
        icon: MapTile.PLAYER,
        element: playerEditElement,
      },
    ],
  },
];

let activeName = ref<NameType>();

function changeActiveName(name: NameType) {
  activeName.value = name;
}

const { initMap, updateMapRow, updateMapCol } = useMapEditStore();
const { row, col } = $(useMapEditStore());

watchEffect(() => {
  if (!row) return;
  updateMapRow();
});

watchEffect(() => {
  if (!col) return;
  updateMapCol();
});

initMap();
</script>

<style scoped lang="scss">
.element-select-wrapper {
  margin-left: 20px;
  margin-bottom: 20px;
  .title {
    font-weight: 700;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .element-item {
    .input-box {
      font-weight: 700;
      font-size: 16px;
      input {
        border: 1px solid #fff;
      }
    }
    .element-box {
      display: flex;
      .title {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
